<template>
    <div class="left-panel">
      <h1>左侧页面</h1>
      
      <div class="model-selection">
        <h2>选择模型:</h2>
        <select v-model="selectedModel">
          <option value="model1">模型 1</option>
          <option value="model2">模型 2</option>
          <option value="model3">模型 3</option>
        </select>
      </div>
  
      <div class="parameters">
        <h2>参数设置:</h2>
        <label for="iou">IOU:</label>
        <input type="number" id="iou" v-model.number="iou" min="0" max="1" step="0.01" />
        
        <label for="conf">Conf:</label>
        <input type="number" id="conf" v-model.number="confidence" min="0" max="1" step="0.01" />
      </div>
  
      <div class="actions">
        <h2>操作:</h2>
        <button @click="toggleCamera">{{ isCameraOpen ? '关闭摄像头' : '打开摄像头' }}</button>
        <input type="file" @change="uploadImage" accept="image/*" />
      </div>
      
      <CenterPanel :isCameraOpen="isCameraOpen" :stream="stream" />
    </div>
  </template>
  
  <script lang="ts">
  import { ref, onUnmounted } from 'vue';
  import CenterPanel from './Center.vue'; // 引入 CenterPanel
  
  export default {
    name: 'LeftPanel',
    components: {
      CenterPanel,
    },
    setup() {
      const selectedModel = ref('model1');
      const iou = ref(0.5);
      const confidence = ref(0.5);
      const isCameraOpen = ref(false);
      const video = ref<HTMLVideoElement | null>(null);
      let stream: MediaStream | null = null;
  
      const toggleCamera = async () => {
        if (isCameraOpen.value) {
          closeCamera();
        } else {
          await openCamera();
        }
      };
  
      const openCamera = async () => {
        try {
          stream = await navigator.mediaDevices.getUserMedia({ video: true });
          isCameraOpen.value = true;
        } catch (error) {
          console.error('无法访问摄像头:', error);
        }
      };
  
      const closeCamera = () => {
        if (stream) {
          stream.getTracks().forEach(track => track.stop());
          isCameraOpen.value = false;
          stream = null;
        }
      };
  
      const uploadImage = (event: Event) => {
        const target = event.target as HTMLInputElement;
        if (target.files) {
          const file = target.files[0];
          console.log('上传的文件:', file);
          // 处理上传的文件
        }
      };
  
      onUnmounted(() => {
        closeCamera(); // 清理摄像头资源
      });
  
      return {
        selectedModel,
        iou,
        confidence,
        isCameraOpen,
        stream,
        toggleCamera,
        uploadImage,
      };
    },
  };
  </script>
  
  <style scoped>
  .left-panel {
    padding: 20px;
    background-color: #f2f2f2;
    border-right: 1px solid #ccc;
  }
  
  .model-selection, .parameters, .actions {
    margin-bottom: 20px;
  }
  
  h2 {
    margin-bottom: 10px;
  }
  
  label {
    display: block;
    margin-top: 10px;
  }
  
  input[type="number"], select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
  }
  
  button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #45a049;
  }
  </style>
  